<template>
  <!-- 抖音素材 ---- 视频详情 （接口没有对接）-->
  <div id="v_details">
    <van-nav-bar title="视频详情" />
    <div class="box">
      <!-- 视频简介 -->
      <div class="head">
        <!-- 视频ban -->
        <div class="boxleft">
          <a href class="aa">
            <img :src="video_message&&video_message.thum_pic" />
          </a>
          <a :href="video_message&&video_message.url" target="_blank">
            <img src="@/assets/two/play.png" class="play" />
          </a>
        </div>
        <!-- 文字介绍 -->
        <div class="boxright">
          <p class="tit">{{ video_message&&video_message.title }}</p>
          <!-- 数字 -->
          <div class="num">
            <div class="one">
              <p>{{ format_num(video_message&&video_message.favorite_count) }}</p>
              <span>点赞数</span>
            </div>
            <div class="two">
              <p>{{ format_num(video_message&&video_message.comment_count) }}</p>
              <span>评论数</span>
            </div>
            <div class="three">
              <p>{{ format_num(video_message&&video_message.share_count) }}</p>
              <span>关注数</span>
            </div>
          </div>
          <!-- 作者+时间 -->
          <div class="time">
            <div class="author">
              <a href>
                <!-- <img :src="video_message.logo"
                alt="">-->
              </a>
              <!-- <span>{{ video_message.nickName }}</span> -->
            </div>
            <div
              class="day"
            >发布时间：{{(video_message&&video_message.release_time, 'Y-M-D h:m:s')}}</div>
          </div>
        </div>
      </div>
      <!-- 音乐背景  -->
    </div>
  </div>
</template>
<script>
export default {
  name: 'pop',
  //   components: { video01, video02, video03, video04, VueQr },
  data() {
    return {
      reload: true,
      video_message: null,
      dialog: true,
      active_name: '0',
      to_video01: null,
      video_id: ''
    };
  },
  model: {
    prop: 'value',
    event: 'returnBack'
  },
  props: ['value', 'id', 'index'],
  computed: {},
  created() {
    this.dialog = this.value;
    this.active_name = this.index;
    this.video_id = this.id;

    this.$watch('dialog', function (newValue, oldValue) {
      // this.$emit('returnBack', this.dialog)
    });
    this.get_data();
  },
  mounted() {},
  methods: {
    show_pop(parm) {
      this.video_id = parm;
      this.get_data(true);
    },

    //   弹窗的视频详情
    get_data(parm) {
      let that = this;
      this.$axios({
        method: 'get',
        url: '/api/aweme/detail',
        params: {
          awemeid: that.video_id
        }
      })
        .then(response => {
          if (response.data.code == 0) {
            this.video_message = response.data.data.aweme;
            this.to_video01 = response.data.data;
            if (parm) {
              this.active_name = '0';
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style scoped lang='less'>
#v_details {
  width: 100%;
  .box {
    width: 9.2rem;
    margin: 0 auto;
    .head {
      display: flex;
      border: 1px solid transparent;
      border-radius: 8px;
      background: #fff;
      margin-top: 0.2rem;
      // 视频ban
      .boxleft {
        width: 28.98%;
        position: relative;
        > .aa {
          width: 80%;
          height: 2.666667rem;
          display: block;
          margin: 0.266667rem auto 0 auto;
          border-radius: 0.213rem;
          overflow: hidden;
          > img {
            width: 100%;
            height: 100%;
            display: inline-block;
          }
        }
        .play {
          position: absolute;
          top: 32%;
          left: 30%;
        }
      }
      // 文字介绍
      .boxright {
        width: 71.02%;
        .tit {
          width: 84.48%;
          line-height: 0.373333rem;
          font-size: 0.373333rem;
          padding: 0.48rem 0 0.4rem 0.026rem;
          color: #222;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .num {
          display: flex;
          .one > p,
          .two > p,
          .three > p {
            font-family: Dinpro-medium;
          }
          .one,
          .two {
            width: 34.28%;
          }
          .three {
            width: 30.6%;
          }
          p {
            font-size: 0.293rem;
            text-align: left;
            padding-bottom: 0.186rem;
            color: #222;
          }
          span {
            display: block;
            font-size: 0.266667rem;
            text-align: left;
            padding-bottom: 0.293333rem;
            color: #888;
          }
        }
        .time {
          display: flex;
          height: 0.506667rem;
          padding-bottom: 0.373333rem;
          .author {
            display: flex;
            width: 2.8rem;
            height: 0.506667rem;
            font-family: PingFangSC-Regular;
            font-size: 0.306rem;
            color: #222;
            a {
              display: block;
              width: 0.506667rem;
              height: 0.506667rem;
              border-radius: 50%;
              overflow: hidden;
              img {
                width: 100%;
                height: 100%;
                display: inline-block;
              }
            }
            > span {
              display: block;
              width: 2.13rem;
              padding-left: 0.133rem;
              padding-top: 0.026667rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .day {
            margin-left: 0.16rem;
            width: 55.1%;
            line-height: 0.506667rem;
            font-size: 0.306rem;
            color: #888;
            overflow: hidden;
          }
        }
      }
    }
    //   音乐背景
  }
}
</style>